<!-- 门店订单详情 -->
<template>
	<view class="order-detail-wrap">
		<shopro-navbar back-icon-color="#fff" :background="{ background: `#0099E5`}"
			:backTextStyle="{ color: '#fff', fontSize: '36rpx', fontWeight: '500' }" :backText="'订单详情'"></shopro-navbar>
		<view class="" style="width: 750rpx;height: 211rpx;background: #0099E5;padding: 2rpx 40rpx;">
			<view class="" style="font-size: 40rpx;font-family: Source Han Sans CN;font-weight: bold;color: #FEFEFE;">
				{{ orderDetail.status_name || '无' }}
			</view>
			<view class="" v-if="!orderDetail.qingxi_time"
				style="font-size: 28rpx;font-family: Source Han Sans CN;font-weight: 400;color: #FEFEFE;margin-top: 22rpx;">
				取件时段 {{ $u.timeFormat(orderDetail.yuyue_time, 'yyyy-mm-dd hh:MM') }}
			</view>
			<view class="" v-if="orderDetail.qingxi_time"
				style="font-size: 28rpx;font-family: Source Han Sans CN;font-weight: 400;color: #FEFEFE;margin-top: 22rpx;">
				清洗时间 {{ $u.timeFormat(orderDetail.qingxi_time, 'yyyy-mm-dd hh:MM') }}
			</view>
		</view>
		<view class="x-f" style="height: auto;background: #FFFFFF;border-radius: 15rpx;border-radius: 10rpx;margin: -60rpx 25rpx 25rpx 25rpx;padding: 25rpx 0 25rpx 25rpx;
			justify-content: space-between;align-items: flex-start;" @tap="openStoreMaps">
			<view class="x-f" style="align-items: flex-start;">
				<view class="qu">取</view>
				<view class="address" style="">
					{{orderDetail.province_name+orderDetail.city_name+orderDetail.area_name+orderDetail.address ? orderDetail.province_name+orderDetail.city_name+orderDetail.area_name+orderDetail.address : ''}}
					<view class="phone_name" style="">
						{{orderDetail.consignee||''}}
						<span style="margin-left: 30rpx;">
							{{orderDetail.phone||''}}
						</span>
					</view>
				</view>
			</view>
			<view class="bohao x-f" @tap.stop="onService(orderDetail.phone)">
				<image src="@/static/imgs/dh.png" style="margin-right: 8rpx;"></image>
				一键拨号
			</view>
		</view>
		<view class="x-f" style="height: auto;background: #FFFFFF;border-radius: 15rpx;border-radius: 10rpx;margin: 0rpx 25rpx 25rpx 25rpx;padding: 25rpx 0 25rpx 25rpx;
			justify-content: space-between;align-items: flex-start;"
			v-if="userInfo.id == orderDetail.send_user_id || curRoute == 'pages/order/detail'">
			<view class="x-f" style="align-items: flex-start;">
				<view class="address" style="">
					取衣员-{{orderDetail.peisongyuan_info ? orderDetail.peisongyuan_info.nickname : '暂未指派'}}
					<view class="phone_name" style="">
						历史订单：{{orderDetail.peisongyuan_info ? orderDetail.peisongyuan_info.order_count : '0'}}单
					</view>
				</view>
			</view>
			<view class="bohao x-f"
				style="background: linear-gradient(-10deg, #0099E5, #2987F5, #5BBCF8);box-shadow: 2rpx 2rpx 9rpx 0rpx rgba(39,120,216,0.53);"
				@tap.stop="onService(orderDetail.peisongyuan_info.mobile)">
				<image src="@/static/imgs/dh.png" style="margin-right: 8rpx;"></image>
				一键拨号
			</view>
		</view>
		<!-- 订单卡片 -->
		<view class="card-box order-detail-card" v-if="!peisong && 0">
			<view class="card-title u-flex ">清洗物品 <span style="margin-left: 20rpx;"
					class="item-content">共{{ orderDetail.alll_count || '' }}件</span>
			</view>
			<view class="order-goods-item u-m-b-10" v-for="item in orderDetail.item" :key="item.id">
				<shopro-mini-card :title="item.goods_title" :detail="g" :image="item.goods_image">
					<!-- <template #describe>
						<view class="order-sku u-ellipsis-1">
							<text class="order-num">数量:{{ item.goods_num || 0 }};</text>
							{{ item.goods_sku_text ? item.goods_sku_text : '' }}
						</view>
					</template> -->
					<template #cardBottom>
						<view class="card-price-box u-flex" style="justify-content: space-between;">
							<!-- <text class="order-price font-OPPOSANS">￥{{ item.goods_price || 0 }}</text>
							<button class="u-reset-button status-btn"
								v-if="item.status_name">{{ item.status_name }}</button> -->
							<view class="x-f">
								<text>￥{{ item.goods_price || '' }}</text>

								<view class="x-f" style="margin-left: 14rpx;
									height: 36rpx;line-height: 36rpx;padding: 0 0 0 12rpx;
									background: #F95641;
									border-radius: 8rpx;" v-if="item.discounts">
									<view class="origin-price" style="
									font-size: 22rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #FFFFFF;">{{ item.discounts || '' }}折后</view>
									<view class="price" style="width: 62rpx;
									height: 32rpx;
									line-height: 28rpx;text-align: center;
									background: #FFFFFF;
									border: 2px solid #F95641;
									border-radius: 8rpx;
									font-size: 18rpx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #F95641;">{{ item.discounts * item.goods_price / 10 }}</view>
								</view>
							</view>
							<text class="goods-num">x{{ item.goods_num || '' }}</text>
						</view>
					</template>
				</shopro-mini-card>
				<!-- <view class="goods-phone card-item" v-show="item.ext_arr.dispatch_phone">
					<text class="item-title">预留电话：</text>
					<text class="item-content">{{ item.ext_arr.dispatch_phone }}</text>
				</view>
				<view class="goods-date card-item">
					<text class="item-title" v-show="item.dispatch_type === 'selfetch'">到店/自提时间：</text>
					<text class="item-title" v-show="item.dispatch_type === 'store'">配送时间：</text>
					<text class="item-content">{{ item.ext_arr.dispatch_date || '' }}</text>
				</view> -->
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order-detail-card" v-if="userInfo.id == orderDetail.send_user_id || 1">
			<view class="card-title u-flex ">订单详情 <span style="margin-left: 20rpx;"
					class="item-content">共{{ orderDetail.alll_count || '' }}件</span>
			</view>
			<view class="detial-content">
				<view class="order-goods-item u-m-b-10 x-f" style="align-items: flex-start;"
					v-for="item in orderDetail.item" :key="item.id">
					<image :src="item.goods_image" style="min-width: 160rpx;width: 160rpx;height: 160rpx;"
						mode="widthFix"></image>
					<view class=""
						style="border-bottom: solid 1rpx rgb(246, 246, 246);width: 100%;padding-bottom: 20rpx;">
						<view class="item-title">{{ item.goods_title || '' }}</view>
						<view class="item-content x-f" v-if="!peisong"
							style="margin-top: 30rpx;margin-bottom: 16rpx;justify-content: space-between;">
							<view class="x-f"
								style="font-size: 24rpx;font-family: PingFang SC;font-weight: 800;color: #333333;">
								原价￥{{ item.goods_price || 0 }}

								<view class="x-f" style="margin-left: 14rpx;
										height: 36rpx;line-height: 36rpx;padding: 0 0 0 12rpx;
										background: #F95641;
										border-radius: 8rpx;">
									<view class="origin-price" style="
										font-size: 22rpx;
										font-family: PingFang SC;
										font-weight: 400;
										color: #FFFFFF;">优惠后</view>
									<view class="price" style="min-width: 62rpx;
										height: 32rpx;
										line-height: 28rpx;text-align: center;
										background: #FFFFFF;
										border: 2px solid #F95641;
										border-radius: 8rpx;
										font-size: 18rpx;
										font-family: Source Han Sans CN;
										font-weight: 400;
										color: #F95641;">{{ item.goods_price - item.discount_fee / item.goods_num }}</view>
								</view>
							</view>

							x{{ item.goods_num }}
						</view>
						<view class=""
							v-if="!peisong && curRoute != 'pages/order/detail'"
							@tap.stop="jump('/pages/app/merchant/luru', { id: orderDetail.id, item_id: item.id })"
							style="font-size: 28rpx;font-family: Source Han Sans CN;font-weight: 400;text-align: center;
color: #333333;width: 160rpx;height: 62rpx;line-height: 60rpx;background: #FFFFFF;border: 1px solid #CCCCCC;border-radius: 31rpx;float: right;">
							{{item.express_time ? '已录入' : '衣物信息'}}
						</view>
					</view>
				</view>

				<view class=""
					style="width: 700rpx;height: 170rpx;background: #EEEEEE;border-radius: 5rpx;font-size: 28rpx;font-family: Source Han Sans CN;font-weight: 400;color: #888888;padding: 30rpx;">
					{{curRoute != 'pages/order/detail' ? '客户留言' : '我的留言'}}：{{orderDetail.remark}}
				</view>

				<view class="order-detail-card"
					style="width: 700rpx;height: auto;background: #EEEEEE;border-radius: 10rpx;padding: 32rpx 0 32rpx 24rpx;">
					<view class="detail-item " style="background: #EEEEEE;">
						<view class=" titles ">{{ storeInfo.name }}</view>
						<view class="u-flex u-row-between">
							<view class="u-m-r-20" style="flex: 3;">
								<view class="x-f" style="margin-top: 22rpx;">
									<view style="display: flex;align-items: center;justify-content: center;
										font-size: 24rpx;font-family: Source Han Sans CN;font-weight: 400;color: #888888;">
										<image src="@/static/imgs/openhours.png"
											style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"></image>
										营业时间：{{ storeInfo.openhours || '' }}
									</view>
								</view>
								<view class="x-f" style="margin-top: 22rpx;" @tap="openStoreMap">
									<view style="display: flex;align-items: center;justify-content: center;
										font-size: 24rpx;font-family: Source Han Sans CN;font-weight: 400;color: #888888;">
										<image src="@/static/imgs/address.png"
											style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"></image>
										店铺地址：{{storeInfo.province_name+storeInfo.city_name+storeInfo.area_name+storeInfo.address ? storeInfo.province_name+storeInfo.city_name+storeInfo.area_name+storeInfo.address : ''}}
									</view>
								</view>
							</view>
							<view class="bohao x-f" @tap.stop="onService(orderDetail.phone)">
								<image src="@/static/imgs/dh.png" style="margin-right: 8rpx;"></image>
								一键拨号
							</view>
							<!-- <view class="u-flex-col u-col-center location-box" style="flex: 1;" @tap="openStoreMap">
								<text class="u-iconfont uicon-map-fill" style="color: #4fbbff;font-size: 34rpx;"></text>
								<text class="location-text u-m-t-10">到这去</text>
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-detail-card">
			<view class="card-title u-flex " v-if="!peisong"
				style="margin-bottom: -20rpx;">价格明细</view>
			<view class="detial-content detial-contents">
				<!-- <view class="detail-item u-flex">
					<view class="item-titles">订单状态：</view>
					<view class="item-content">{{ orderDetail.status_name }}</view>
				</view> -->
				<view class="detail-item u-flex" v-if="!peisong">
					<view class="item-titles">下单总价：</view>
					<view class="item-content">{{ orderDetail.total_amount || '' }}</view>
				</view>
				<view class="detail-item u-flex" v-if="!peisong">
					<view class="item-titles">折扣优惠：</view>
					<view class="item-content" style="color: #F95641;">-￥{{ orderDetail.discount_fee || '' }}</view>
				</view>
				<view class="detail-item u-flex" v-if="!peisong">
					<view class="item-titles">实付款：</view>
					<view class="item-content" style="color: #F95641;">￥{{ orderDetail.pay_fee || '' }}</view>
				</view>
				<view class="detail-item u-flex" v-if="!peisong">
					<view class="item-titles">支付方式：</view>
					<view class="item-content">{{ (orderDetail.pay_type == 'wallet' ? '余额支付' : '微信支付') }}</view>
				</view>
				<view class="detail-item u-flex" v-if="!peisong">
					<view class="item-titles">支付时间：</view>
					<view class="item-content">{{ $u.timeFormat(orderDetail.paytime, 'yyyy-mm-dd hh:MM') }}</view>
				</view>
				<view class="detail-item u-flex">
					<view class="item-titles">订单编号：</view>
					<view class="item-content">{{ orderDetail.order_sn }}
						<view class="item-titles" style="margin-left: 20rpx;font-weight: 600;"
							@click="copy_share(orderDetail.order_sn)">复制</view>
					</view>
				</view>
				<view class="detail-item u-flex">
					<view class="item-titles">派单时间：</view>
					<view class="item-content">{{ $u.timeFormat(orderDetail.surplus_time, 'yyyy-mm-dd hh:MM') }}</view>
				</view>
				<view class="detail-item u-flex">
					<view class="item-titles">取件时段 ：</view>
					<view class="item-content">{{ $u.timeFormat(orderDetail.yuyue_time, 'yyyy-mm-dd hh:MM') }}</view>
				</view>
				<view class="detail-item u-flex">
					<view class="item-titles">取件时间 ：</view>
					<view class="item-content">{{ $u.timeFormat(orderDetail.receive_time, 'yyyy-mm-dd hh:MM') }}</view>
				</view>
				<view class="detail-item u-flex">
					<view class="item-titles">收衣时间 ：</view>
					<view class="item-content">{{ $u.timeFormat(orderDetail.shouyi_time, 'yyyy-mm-dd hh:MM') }}</view>
				</view>
				<view class="detail-item u-flex">
					<view class="item-titles">清洗时间 ：</view>
					<view class="item-content">{{ $u.timeFormat(orderDetail.qingxi_time, 'yyyy-mm-dd hh:MM') }}</view>
				</view>
				<!-- 派单时间： 取件时段： 取件时间： 收衣时间： 清洗时间： -->
				<!-- <view class="detail-item u-flex" v-if="orderDetail.consignee">
					<view class="item-titles">联系人：</view>
					<view class="item-content">{{ orderDetail.consignee }}</view>
				</view>
				<view class="detail-item u-flex" v-if="orderDetail.phone" @click="onService(orderDetail.phone)">
					<view class="item-titles">联系人电话：</view>
					<view class="item-content">{{ orderDetail.phone }}
						<text class="u-iconfont uicon-phone-fill u-m-r-10"
							style="color: #0099E5;font-size: 40rpx;"></text>
					</view>
				</view>
				<view class="detail-item u-flex" v-if="orderDetail.remark">
					<view class="item-titles">备注：</view>
					<view class="item-content">{{ orderDetail.remark }}</view>
				</view>
				<view class="detail-item address-item" v-if="orderType.includes('store')">
					<view class="item-titles">配送地址：</view>
					<view class="item-content address-content">
						{{ orderDetail.province_name || '' }}{{ orderDetail.city_name || '' }}{{ orderDetail.area_name || '' }}{{ orderDetail.address || '' }}
					</view>
				</view>
				<view class="detail-item u-flex" v-if="orderDetail.peisongyuan_info">
					<view class="item-titles">取衣员：</view>
					<view class="item-content">{{ orderDetail.peisongyuan_info.nickname }}</view>
				</view>
				<view class="detail-item u-flex" v-if="orderDetail.peisongyuan_info"
					@click="onService(orderDetail.peisongyuan_info.mobile)">
					<view class="item-titles">取衣员手机号：</view>
					<view class="item-content">{{ orderDetail.peisongyuan_info.mobile }}
						<text class="u-iconfont uicon-phone-fill u-m-r-10"
							style="color: #0099E5;font-size: 40rpx;"></text>
					</view>
				</view> -->
			</view>
		</view>
		<view class="order-detail-card">
			<view class="card-title u-flex ">已取物品</span>
			</view>
			<view class="detial-content" style="padding-top: 0;">
				<view class="detail-item u-flex">
					<view class="item-titles">衣物数量：</view>
					<view class="item-content">{{ orderDetail.memo || 0 }}</view>
				</view>
				<view class="">
					<image :src="src" v-for="src in orderDetail.images"
						style="width: 100%;border-radius: 20rpx;margin-top: 20rpx;" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="quhuo" v-show="quhuo">
			<view class="form-item ">
				<view class="star-box u-flex">
					<view class="star-title u-m-r-40">{{ '取衣信息：' }}</view>
				</view>
				<view class="area-box">
					<textarea class="inp-area" style="height: 100rpx;" v-model="orderDetail.memo" placeholder="请输入衣物数量"
						placeholder-class="pl-style" />
				</view>
				<view class="img-box">
					<u-upload :showProgress="false" :previewFullImage="true" @on-uploaded="uploadSuccess"
						@on-remove="uploadRemove" uploadText="上传包装拍照" :action="`${$BASE_URL}/api/common/upload`"
						:header="{token: token}" width="238" height="238" maxCount="9"></u-upload>
				</view>
				<view class="bottom-box u-flex u-row-center u-col-center">
					<button class="cu-btn send-btn" @tap="shoujian(2)">确认取衣</button>
				</view>
			</view>
		</view>
		<view class="" v-if=" curRoute != 'pages/order/detail'">
			<view class="bottom-hack" v-if="orderDetail.status_code == 'nosend'">
				<picker @change="bindendtimeChange" :range="orderDetail.peisongyuan" range-key="nickname"
					v-if="orderDetail.receive_status == 0">
					<view class="bottom-box u-flex u-row-center u-col-center"><button
							class="cu-btn send-btn">分配配送员</button>
					</view>
				</picker>
				<view v-if="orderDetail.receive_status == 1 && userInfo.id == orderDetail.send_user_id"
					class="bottom-box u-flex u-row-center u-col-center">
					<button class="cu-btn send-btn" @tap="quhuo = true">确认取衣</button>
				</view>
				<view v-if="(orderDetail.receive_status == 2) && !peisong"
					class="bottom-box u-flex u-row-center u-col-center">
					<!-- <button class="cu-btn send-btn" @tap.stop="jump('/pages/app/merchant/luru', { id: orderDetail.id })">确认收衣</button> -->
					<button class="cu-btn send-btn" @tap="shoujian(3)">确认收衣</button>
				</view>
				<view v-if="(orderDetail.receive_status == 3) && !peisong"
					class="bottom-box u-flex u-row-center u-col-center">
					<button class="cu-btn send-btn" @tap="shoujian(4)">开始清洗</button>
				</view>
				<view v-if="orderDetail.receive_status == 4 && !orderDetail.store.is_dianyuan"
					class="bottom-box u-flex u-row-center u-col-center">
					<button class="cu-btn send-btn" @tap="sendOrder">清洗完成</button>
				</view>
				<!-- <view class="bottom-box u-flex u-row-center u-col-center"><button class="cu-btn send-btn" @tap="sendOrder">发货</button></view> -->
			</view>
			<view class="bottom-hack" v-if="orderDetail.status_code != 'nosend'">
				<view v-if="orderDetail.receive_status == 4" class="bottom-box u-flex u-row-center u-col-center"><button
						class="cu-btn send-btn" @tap="onConfirm(orderDetail.id)">确认送回</button></view>
			</view>
		</view>
		<view class="x-f btm_box" @click="jump('/pages/public/chat/index')" v-else>
			<view class="btm">
				联系客服
			</view>
			<view class="btm" @tap.stop="onOrderConfirm(orderDetail.id)">
				确认完成
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				peisong: 0,
				quhuo: false,
				imgList: [],
				message: '',
				curRoute: '',
				token: uni.getStorageSync('token'),
				storeInfo: {}, //自提点信息
				orderDetail: {},
				orderType: []
			};
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo', 'userOtherData']),
		},
		onLoad(op) {
			if (op?.peisong) {
				this.peisong = op.peisong
			}
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			this.curRoute = routes[routes.length - 1].route //获取当前页面路由
			this.getOrderDetail();
		},
		methods: {
			// 打开地图
			openStoreMaps() {
				uni.openLocation({
					latitude: +this.orderDetail.latitude,
					longitude: +this.orderDetail.longitude,
					name: this.orderDetail.province_name + this.orderDetail.city_name + this.orderDetail.area_name,
					address: this.orderDetail.address,
					success: function() {
						console.log('success');
					},
					fail: err => {
						console.log(err);
					}
				});
			},
			openStoreMap() {
				uni.openLocation({
					latitude: +this.storeInfo.latitude,
					longitude: +this.storeInfo.longitude,
					name: this.storeInfo.province_name + this.storeInfo.city_name + this.storeInfo.area_name,
					address: this.storeInfo.address,
					success: function() {
						console.log('success');
					},
					fail: err => {
						console.log(err);
					}
				});
			},
			copy_share(data) {
				let that = this;
				uni.setClipboardData({
					data: data,
					success: res => {
						// uni.hideToast();
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000 //时间
						});
					}
				});
			},
			// 跳转客服
			onService(phone) {
				this.$tools.callPhone(phone);
			},
			// 确认收货
			onOrderConfirm(id, itemId = 0) {
				let that = this;
				uni.showModal({
					title: '提示',
					confirmColor: '#0099E5',
					content: '确定订单已完成吗？',
					success: res => {
						if (res.confirm) {
							that.$http(
								'order.confirm', {
									id: id,
									order_item_id: itemId
								},
								'确认中...'
							).then(res => {
								if (res.code === 1) {
									that.getOrderDetail();
								}
								if (res.msg) {
									that.$u.toast(res.msg);
								}
							});
						}
					}
				});
			},
			// 确认收货
			onConfirm(id, itemId = 0) {
				let that = this;
				uni.showModal({
					title: '提示',
					confirmColor: '#0099E5',
					content: '确定送达了吗？',
					success: res => {
						if (res.confirm) {
							that.$http(
								'store.orderConfirms', {
									id: id,
									store_id: uni.getStorageSync('storeId'),
									order_item_id: itemId
								},
								'确认中...'
							).then(res => {
								if (res.code === 1) {
									that.getOrderDetail();
								}
							});
						}
					}
				});
			},
			// 上传图片成功
			uploadSuccess(e) {
				this.imgList = [];
				e.forEach(item => {
					console.log(item)
					this.imgList.push(item.response.data.url);
				});
			},
			// 移除图片
			uploadRemove(index) {
				this.imgList.splice(index, 1);
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			shoujian(receive_status = 2) {
				let that = this;
				that.$http('store.orderDetail', {
					id: that.$Route.query.orderId ? that.$Route.query.orderId : that.$Route.query.id,
					store_id: uni.getStorageSync('storeId'),
					receive_status: receive_status,
					memo: that.orderDetail.memo,
					images: that.imgList
				}).then(res => {
					that.quhuo = false;
					if (res.code === 1) {
						that.orderDetail = res.data;
						that.orderDetail.paytime = that.$u.timeFormat(res.data.paytime,
							'yyyy-mm-dd hh:MM');
						that.orderDetail.item.forEach(goods => {
							that.orderType.push(goods.dispatch_type);
						});
					}
					if (res.msg) {
						that.$u.toast(res.msg);
					}
				});
			},
			bindendtimeChange(e) {
				var that = this;
				console.log(e);
				console.log(that.orderDetail.peisongyuan);
				// that.endtime = e.detail.value;
				var i = 0;
				for (let key in that.orderDetail.peisongyuan) {
					if (i == e.detail.value) {
						that.$http('store.orderDetail', {
							id: that.$Route.query.orderId ? that.$Route.query.orderId : that.$Route.query.id,
							store_id: uni.getStorageSync('storeId'),
							send_user_id: that.orderDetail.peisongyuan[key].id
						}).then(res => {
							if (res.code === 1) {
								that.orderDetail = res.data;
								that.orderDetail.paytime = that.$u.timeFormat(res.data.paytime,
									'yyyy-mm-dd hh:MM');
								that.orderDetail.item.forEach(goods => {
									that.orderType.push(goods.dispatch_type);
								});
							}
							if (res.msg) {
								that.$u.toast(res.msg);
							}
						});
					}
					i++;
				}
			},
			// 订单详情
			getOrderDetail() {
				let that = this;
				that.$http('store.orderDetail', {
					id: that.$Route.query.orderId ? that.$Route.query.orderId : that.$Route.query.id,
					store_id: uni.getStorageSync('storeId')
				}).then(res => {
					if (res.code === 1) {
						that.storeInfo = res.data.store;
						that.orderDetail = res.data;
						that.orderDetail.paytime = that.$u.timeFormat(res.data.paytime,
							'yyyy-mm-dd hh:MM');
						that.orderDetail.item.forEach(goods => {
							that.orderType.push(goods.dispatch_type);
						});
					}
				});
			},
			// 订单发货
			sendOrder() {
				let that = this;
				that.$http(
					'store.orderSend', {
						id: that.orderDetail.id,
						store_id: uni.getStorageSync('storeId')
					}
				).then(res => {
					if (res.code === 1) {
						that.$u.toast(res.msg);
						that.getOrderDetail();
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.order-detail-wrap {
		height: 100%;

		.bottom-hack {
			width: 750rpx;
			height: 100rpx;
		}

		.bottom-box {
			position: fixed;
			width: 750rpx;
			height: 100rpx;
			bottom: 0;
			left: 0;
			background-color: #fff;
			padding: 10rpx 0;

			.send-btn {
				width: 710rpx;
				height: 80rpx;
				background: linear-gradient(90deg, #0099E5, #0099E5);
				// border: 1rpx solid rgba(237, 237, 237, 1);
				border-radius: 40rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);

				width: 650rpx;
				height: 86rpx;
				background: #0099E5;
				border-radius: 43rpx;
			}
		}
	}

	// 订单卡片
	.card-box {
		margin-bottom: 20rpx;
		background-color: #fff;

		.order-goods-item {
			border-bottom: 1rpx solid rgba(237, 237, 237, 1);
			padding: 20rpx;

			.card-item {
				line-height: 60rpx;

				.item-title {
					font-size: 28rpx;
					color: #999;
				}

				.item-content {
					font-size: 26rpx;
					color: #333;
				}
			}
		}

		.order-sku {
			font-size: 24rpx;

			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			width: 450rpx;
			margin-bottom: 20rpx;

			.order-num {
				margin-right: 10rpx;
			}
		}

		.card-price-box {
			.status-btn {
				height: 32rpx;
				border: 1rpx solid #0099E5;
				border-radius: 15rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: #0099E5;
				padding: 0 10rpx;
				margin-left: 20rpx;
				background: rgba(0, 153, 229, 0.16);
			}

			.order-price {
				font-size: 26rpx;

				font-weight: 600;
				color: rgba(51, 51, 51, 1);
			}
		}
	}

	.titles {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
	}

	.order-detail-card {
		background-color: #fff;
		margin: 20rpx 0;

		.card-title {
			font-size: 30rpx;

			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			height: 80rpx;
			padding: 0 20rpx;
			// border-bottom: 1rpx solid rgba(223, 223, 223, 0.5);

			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
		}

		.detial-content {
			padding: 20rpx;

			.detail-item {
				min-height: 60rpx;

				.item-title {
					font-size: 28rpx;
					color: #999;
				}

				.item-content {
					font-size: 26rpx;
					color: #333;
				}
			}

			.address-item {
				display: flex;

				.address-content {
					width: 550rpx;
				}
			}
		}

		.item-title {
			font-size: 28rpx;
			color: #999;

			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #292A37;
		}

		.item-content {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #888888;
		}
	}

	.detail-item {
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		width: 100%;

		.item-title {
			font-size: 28rpx;

			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			height: 60rpx;
			display: flex;
			align-items: center;
		}

		.item-content {
			font-size: 26rpx;

			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			line-height: 50rpx;
			display: flex;
			align-items: center;
		}

		.item-status {
			font-size: 26rpx;

			font-weight: 400;
			color: #0099E5;
		}

		.item-tip {
			font-size: 24rpx;

			font-weight: 400;
			color: rgba(196, 196, 196, 1);
		}

		.check-code {
			background: none;
			border-radius: 25rpx;
			border: 1rpx solid #0099E5;
			padding: 0;
			width: 100rpx;
			line-height: 50rpx;
			font-size: 28rpx;
			color: #0099E5;
		}

		.location-box {
			height: 100%;
			justify-content: center;
			position: relative;

			&::before {
				content: '';
				width: 2rpx;
				height: 94rpx;
				background: #eeeeee;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 0;
			}

			.location-icon {
				color: #4fbbff;
				margin-bottom: 20rpx;
			}

			.location-text {
				color: #999;
				font-size: 26rpx;
			}
		}
	}

	.service-btn {
		padding: 0;
		width: 710rpx;
		line-height: 80rpx;
		background: linear-gradient(90deg, #0099E5, #0099E5);
		box-shadow: 0px 7rpx 6rpx 0px rgba(0, 153, 229, 0.22);
		border-radius: 40rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	// 评论，选择图片
	.form-item {
		background: #ffff;
		padding-bottom: 30rpx;

		.star-box {
			height: 100rpx;
			padding: 0 25rpx;
		}

		.star-title {
			font-weight: 600;
		}
	}

	.area-box {
		width: 690rpx;
		min-height: 86rpx;
		background: rgba(249, 250, 251, 1);
		border-radius: 20rpx;
		padding: 28rpx;
		margin: auto;
		width: 650rpx;
		height: 86rpx;
		background: #F8F8F8;
		border-radius: 43rpx;

		.pl-style {
			font-size: 26rpx;

			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			line-height: 42rpx;
		}

		.inp-area {
			font-size: 26rpx;

			font-weight: 500;
			color: #333;
			line-height: 50rpx;
			width: 100%;
		}
	}

	.img-box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin: 50rpx;
		margin-top: 30rpx;
		width: 650rpx;
		height: 350rpx;
		background: #F8F8F8;
		border-radius: 20rpx;
		justify-content: center;
	}

	.post-btn {
		width: 690rpx;
		line-height: 80rpx;
		background: linear-gradient(90deg, #0099E5, #0099E5);
		border-radius: 40rpx;
		color: rgba(#fff, 0.9);
		margin-bottom: 30rpx;
	}

	.qu {
		min-width: 48rpx;
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		background-color: #0099E5;
		text-align: center;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 48rpx;
		margin-right: 14rpx;
	}

	.address {
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		line-height: 42rpx;
	}

	.phone_name {
		margin-top: 32rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
	}

	.bohao {
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 70rpx;
		min-width: 190rpx;
		width: 190rpx;
		height: 70rpx;
		background: linear-gradient(-10deg, #0099E5, #2987F5, #5BBCF8);
		box-shadow: 2rpx 2rpx 9rpx 0rpx rgba(39, 120, 216, 0.53);
		background: linear-gradient(-20deg, #FF9E1B, #FFDD31);
		box-shadow: 2rpx 2rpx 9rpx 0rpx rgba(242, 169, 55, 0.53);
		border-radius: 35rpx 0rpx 0rpx 35rpx;
		justify-content: center;

		image {
			width: 37rpx;
			height: 37rpx;
		}
	}

	.detial-contents {

		.item-titles {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}

		.u-flex {
			justify-content: space-between;
		}
	}

	.quhuo {
		position: fixed;
		top: 0;
		background: rgba(0, 0, 0, 0.4);
		height: 100vh;
		z-index: 1;
		width: 100vw;

		.form-item {
			position: fixed;
			bottom: 0;
			z-index: 3;
			width: 750rpx;
			height: 738rpx;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
		}
	}

	.btm_box {
		justify-content: flex-end;
		height: 100rpx;
		background: #FFFFFF;
		padding: 0 14rpx;
	}

	.btm {
		margin-left: 20rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		width: 200rpx;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		background: #0099E5;
		border-radius: 38rpx;
	}
</style>